<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/bootstrap.bundle.js">

    </script>
    <link rel="stylesheet" href="my/style.css">
    <!-- vue2 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style type="text/css">
        .d{
            text-align: center;
            width: 600px;
            height: 450px;
            margin:auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div id="login">
         <form class="d">
              <div class="form-floating mb-3">
                  <input type="text" class="form-control" id="username" placeholder="用户名" v-model="username">
                  <label for="username">用户名</label>
              </div>
              <div class="form-floating">
                  <input type="password" class="form-control" id="password1" placeholder="密码" v-model="password">
                  <label for="password1">密码</label>
              </div>
             <br>
              <div class="form-check form-check-inline">
                  <input value="student" v-model="usertype" @change="getRadioVal()" class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                  <label class="form-check-label" for="inlineRadio1">学生</label>
              </div>
              <div class="form-check form-check-inline">
                  <input value="teacher" v-model="usertype" @change="getRadioVal()" class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                  <label class="form-check-label" for="inlineRadio2">教师</label>
              </div>
              <div class="form-check form-check-inline">
                  <input value="admin" v-model="usertype" @change="getRadioVal()" class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" >
                  <label class="form-check-label" for="inlineRadio3">管理员</label>
              </div><br><br>
             <a href="main.html"><div class="btn btn-primary" v-on:click="login()">确认 </div></a>
             <a href="register.html"><input type="button" class="btn btn-primary" value="注册" name=""/></a>
          </form>
    </div>
    <script>
        new Vue({
            el: "#login",
            data: {
                username: "",
                password: "",
                usertype: "student"

            },
            methods: {
                login: function (){
                    console.log(this.username);
                    console.log(this.password);
                    console.log(this.usertype);
                    if (this.usertype==='student'){
                        //查询学生表，如果成功进入 main界面，失败返回错误

                    }else if (this.usertype === 'teacher'){
                        //查询教师表，如果成功 进入main界面，失败返回错误

                    }else{
                        //查询管理员表，如果成功 进入main界面，失败返回错误

                    }
                },
                getRadioVal: function (){
                    console.log(this.usertype);
                },
                loginAdmin: async function(id){
                    axios.post("http://192.168.31.198/admin-provider/admin/"+id,{
                        name: this.user.name,
                        password: this.user.password,
                    }).then(response =>{
                    });
                    // axios({
                    //
                    // })
                },
            }
        })
    </script>
</body>
</html>